<template>
  <div>
    <div style="font-size:18px;"><strong>2018年公司采购分布</strong></div>
    <div :style="{ height:`${height}px` }" :id="id"></div>
  </div>
</template>

<script>
import G2 from '@antv/G2'

export default {
  props: {
    charData: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    id: String
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawChart(this.charData)
  },
  watch: {
    charData (val, oldVal) {
      this.drawChart(val)
    }
  },
  methods: {
    drawChart (datas) {
      this.chart && this.chart.destroy()
      this.chart = new G2.Chart({
        height: this.height,
        container: this.id, // 指定容器
        forceFit: true
      })
      this.chart.source(datas)
      this.chart.interval().position('type*value').color('cat').opacity(1)
      this.chart.guide().text({
        top: true,
        position: ['磁性材料', 'min'],
        content: '量产元器件',
        style: {
          fill: '#c0c0c0', // 文本颜色
          fontSize: 12, // 文本大小
          fontWeight: '300',
          textAlign: 'center'
        },
        offsetY: 40
      })
      this.chart.guide().text({
        top: true,
        position: ['磁性材料.', 'min'],
        content: '项目元器件',
        style: {
          fill: '#c0c0c0', // 文本颜色
          fontSize: 10, // 文本大小
          fontWeight: '300',
          textAlign: 'center'
        },
        offsetY: 40
      })
      this.chart.guide().text({
        top: true,
        position: ['笔', 'min'],
        content: '一般采购',
        style: {
          fill: '#c0c0c0', // 文本颜色
          fontSize: 12, // 文本大小
          fontWeight: '300',
          textAlign: 'center'
        },
        offsetY: 40
      })
      // 分割线
      this.chart.guide().line({
        start: ['30%', '100%'],
        end: ['30%', '120%'],
        lineStyle: {
          storke: '#d9d9d9',
          linDash: [0, 0]
        }
      })
      this.chart.guide().line({
        start: ['60%', '100%'],
        end: ['60%', '120%'],
        lineStyle: {
          storke: '#d9d9d9',
          linDash: [0, 0]
        }
      })
      this.chart.render()
    }
  }
}
</script>
